<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<script setup>
import defaultAvatar from '@/static/logo.png'
import MenuDdfwsp from '@/static/icons/my-ddfwsp.png'
import MenuRypf from '@/static/icons/my-rypf.png'
import MenuRz from '@/static/icons/my-rz.png'
import MenuWdsq from '@/static/icons/my-wdsq.png'
import MenuHdsp from '@/static/icons/my-hdsp.png'
import MenuDdsp from '@/static/icons/my-ddsp.png'
import MenuGzjy from '@/static/icons/my-gzjy.png'
import MenuHdkh from '@/static/icons/my-hdkh.png'
import MenuGrkh from '@/static/icons/my-grkh.png'
import MenuJmsc from '@/static/icons/my-jmsc.png'
import MenuHdpf from '@/static/icons/my-hdpf.png'
import MenuWdjm from '@/static/icons/my-wdjm.png'
import MenuWhdzhd from '@/static/icons/my-whdzhd.png'
import MenuWhdzhdsp from '@/static/icons/my-whdzhdsp.png'
import MenuXzhdsq from '@/static/icons/my-xzhdsq.png'

import LoginApi from '@/service/login'
import MessageApi from '@/service/message'
import { useUserStore } from '@/store'
import { uniNavigateTo } from '@/utils/index'
import TabBar from '@/components/TabBar.vue'
import JudgePermission from '@/components/JudgePermission.vue'
import { useMessage } from 'wot-design-uni'
import { usePermissionStore } from '@/store/permission'

const { clearUserPermission, judgeMenuPermission } = usePermissionStore()

const userStore = useUserStore()

const _userInfo = computed(() => userStore.userInfo)
const _isLogined = computed(() => userStore.isLogined)
const userAvatar = computed(() => _userInfo.value.avatar || defaultAvatar)

const message = useMessage()

// 获取状态栏高度
const { statusBarHeight } = uni.getSystemInfoSync()

const handleLogout = async () => {
  const { code, result, message } = await LoginApi.logout()
  if (code === 200 && result) {
    userStore.clearUserInfo()
    clearUserPermission()
    uni.showToast({
      icon: 'success',
      title: '退出登录成功',
    })
  } else {
    uni.showToast({
      icon: 'error',
      title: message,
    })
  }
}

const messageState = reactive({
  hallActivity: 0,
  userEvaluation: 0,
  // orderSubscribe: 0,
  // hallActivityDeclare: 0,
  // orderDeclare: 0,
  merge: 0, // 3个合并
})

// const myApplicationCount = computed(
//   () =>
//     messageState.orderSubscribe +
//     messageState.hallActivityDeclare +
//     messageState.orderDeclare,
// )

const getMessageCount = async (type, isMerge = false) => {
  const params = {
    bussType: type,
  }
  console.log('params', params)
  const { code, result } = await MessageApi.getMessageCount(params)
  if (code === 200) {
    console.log('orderDeclare', result)
    if (isMerge) {
      messageState.merge = result
    } else {
      messageState[type] = result
    }
  }
}

const tabList = [
  {
    title: '活动考核',
    icon: MenuHdkh,
    path: '/pages-sub/activity/access/index',
    permission: '/hallAdmin/activityApprove',
  },
  {
    title: '个人考核',
    icon: MenuGrkh,
    path: '/pages-sub/personal-access/index',
    permission: '/hallAdmin/selfApprove',
  },
  {
    title: '新增活动申请',
    icon: MenuXzhdsq,
    path: '/pages-sub/activity/add/index',
    permission: '/native/activity',
  },
  {
    title: '我的申请',
    icon: MenuWdsq,
    path: '/pages-sub/my-application/index',
    permission: '',
  },
  {
    title: '活动评分',
    icon: MenuHdpf,
    path: '/pages-sub/activity-mark/index',
    permission: '/hall/hallActivityComment',
  },
  {
    title: '活动审批',
    icon: MenuHdsp,
    path: '/pages-sub/activity-approve/index',
    permission: '/hall/hallActivityDeclareList',
  },
  {
    title: '点单审批',
    icon: MenuDdsp,
    path: '/pages-sub/order-approve/index',
    permission: '/hall/hallOrderSubscribeList',
  },
  {
    title: '点单服务审批',
    icon: MenuDdfwsp,
    path: '/pages-sub/order-serve-approve/index',
    permission: '/hall/hallOrderDeclareList',
  },
  {
    title: '人员评分',
    icon: MenuRypf,
    path: '/pages-sub/person-mark/index',
    permission: '/hall/hallUserEvaluationList',
  },
  {
    title: '我的节目',
    icon: MenuWdjm,
    path: '/pages-sub/programme/index',
    permission: '/hall/hallProgramList',
  },
  {
    title: '我的文化定制活动',
    icon: MenuWhdzhd,
    path: '/pages-sub/township-activity/index',
    permission: '/hall/hallJointActivityList',
  },
  {
    title: '文化定制活动审批',
    icon: MenuWhdzhdsp,
    path: '/pages-sub/township-activity-approve/index',
    permission: '/hall/hallJointActivityApproveList',
  },
]
const _checkedTabList = computed(() => {
  const list = []
  tabList.forEach((item) => {
    if (item.permission) {
      if (judgeMenuPermission(item.permission)) {
        list.push(item)
      }
    } else {
      list.push(item)
    }
  })
  return list
})

// const swiperList = ref([])
// const checkUserPermission = () => {
//   const list = []
//   swiperList.value = []
//   tabList.forEach((item) => {
//     if (item.permission) {
//       if (judgeMenuPermission(item.permission)) {
//         list.push(item)
//       }
//     } else {
//       list.push(item)
//     }
//   })
//   for (let i = 0; i < list.length / 3; i++) {
//     swiperList.value.push(list.slice(i * 3, i * 3 + 3))
//   }
// }

const otherTabList = [
  {
    title: '活动上传',
    icon: MenuJmsc,
    path: '/pages-sub/activity/my/index',
    permission: '/hallAdmin/activityUpload',
  },
  {
    title: '日志查看',
    icon: MenuRz,
    path: '/pages-sub/daily/index',
    permission: '/hall/hallUserWorklogList',
  },
  {
    title: '工作纪要',
    icon: MenuGzjy,
    path: '/pages-sub/work-note/index',
    permission: '',
  },
  // {
  //   title: '课程学习',
  //   icon: MenuKcxx,
  //   path: '/pages-sub/learn/index',
  //   permission: '',
  // },
]
const _checkedOtherTabList = computed(() => {
  const list = []
  otherTabList.forEach((item) => {
    if (item.permission) {
      if (judgeMenuPermission(item.permission)) {
        list.push(item)
      }
    } else {
      list.push(item)
    }
  })
  return list
})

const goPage = (path) => {
  console.log('path', path)
  if (userStore.isLogined) {
    uniNavigateTo(path)
  } else {
    message
      .confirm({
        msg: '您还未登录，是否去登录？',
        title: '提示',
      })
      .then(() => {
        uniNavigateTo('/pages/login/index')
      })
      .catch(() => {
        console.log('点击了取消按钮')
      })
  }
}

// onShow(() => {
//   console.log('sss')
//   // if (_isLogined.value) {
//   //   // checkUserPermission()
//   //   getMessageCount('hallActivity') // 活动考核
//   //   getMessageCount('userEvaluation') // 个人考核
//   //   // getMessageCount('orderSubscribe') // 预约活动申请
//   //   // getMessageCount('hallActivityDeclare') // 新增活动申请
//   //   // getMessageCount('orderDeclare') // 点单服务申请
//   //   const merge = 'orderSubscribe,hallActivityDeclare,orderDeclare'
//   //   getMessageCount(merge, true) // 3个合并
//   // }
// })

const emitTabbarClick = () => {
  uni.$emit('tabbarClick')
}
</script>

<template>
  <view
    class="common-page-bg"
    id="tabbar_page"
  >
    <view @click="emitTabbarClick">
      <view
        class="page-header"
        :style="{
          paddingTop: `${statusBarHeight}px`,
        }"
      >
        <view class="page-header-nav">我的</view>
        <view class="page-header-info">
          <view class="flex items-center">
            <view class="info-avatar">
              <image
                :src="userAvatar"
                mode="aspectFill"
              />
            </view>
            <template>
              <view
                v-if="_isLogined"
                class="info-name"
              >
                {{ _userInfo.realname }}
              </view>
              <view
                v-else
                class="info-name"
              >
                未登录
              </view>
            </template>
          </view>
          <template>
            <wd-button
              custom-class="login-btn"
              v-if="_isLogined"
              @click="handleLogout"
            >
              退出登录
            </wd-button>
            <wd-button
              custom-class="login-btn"
              v-else
              @click="uniNavigateTo('/pages/login/index')"
            >
              去登录
            </wd-button>
          </template>
        </view>
      </view>
      <view class="page-container">
        <view class="menu-group">
          <view
            class="menu-item"
            v-for="item in _checkedTabList"
            :key="item.title"
            @click="goPage(item.path)"
          >
            <view class="flex items-center">
              <image
                class="w-48rpx h-48rpx mr-24rpx"
                :src="item.icon"
                mode="aspectFill"
              />
              <view class="menu-item-label">
                {{ item.title }}
              </view>
            </view>
            <wd-icon
              name="chevron-right"
              size="48rpx"
              color="#B8BEC8"
            ></wd-icon>
          </view>
        </view>
        <view class="menu-group">
          <view class="menu-title">更多服务</view>
          <view
            class="menu-item"
            v-for="item in _checkedOtherTabList"
            :key="item.title"
            @click="goPage(item.path)"
          >
            <view class="flex items-center">
              <image
                class="w-48rpx h-48rpx mr-24rpx"
                :src="item.icon"
                mode="aspectFill"
              />
              <view class="menu-item-label">
                {{ item.title }}
              </view>
            </view>
            <wd-icon
              name="chevron-right"
              size="48rpx"
              color="#B8BEC8"
            ></wd-icon>
          </view>
        </view>
      </view>
    </view>

    <wd-message-box></wd-message-box>
    <TabBar />
  </view>
</template>

<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<style lang="scss" scoped>
.common-page-bg {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.page-header {
  background-image: linear-gradient(180deg, #bee6fb 0%, #f4f7fc 100%);

  &-nav {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: $uni-text-color;
  }

  &-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 216rpx;
    padding: 0 24rpx;

    .info-avatar {
      width: 120rpx;
      height: 120rpx;
      margin-right: 24rpx;
      border: 4rpx solid #fff;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
    }

    .info-name {
      font-size: 36rpx;
      font-weight: 500;
      color: $uni-text-color;
    }
  }
}

.page-container {
  flex: 1;
  padding: 24rpx;
  padding-bottom: 200rpx;
  overflow-y: auto;
}

.menu-group {
  margin-bottom: 24rpx;
  padding: 0 32rpx;
  background-color: #fff;
  border-radius: 16rpx;

  .menu-title {
    height: 92rpx;
    line-height: 92rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: $uni-text-color;
  }

  .menu-item {
    height: 128rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid $uni-border-color;

    &:last-child {
      border-bottom: none;
    }

    &-label {
      font-size: 28rpx;
      color: $uni-text-color;
    }
  }
}

:deep(.login-btn) {
  width: 146rpx !important;
  height: 64rpx !important;
  border-radius: 32rpx !important;
  background: #fff !important;
  font-size: 28rpx !important;
  font-weight: 500 !important;
  color: $uni-color-primary !important;
}
</style>
